<template>
	<view class="page">
		<view class="setting flex-end">
			<u-icon name="scan" color="#6D6D6D" size="28"></u-icon>
			<u-icon name="bell" color="#6D6D6D" size="26"></u-icon>
			<navigator url="/pages/my-setting/index">
				<u-icon :customStyle="{'margin-right': '2px'}" name="setting-fill" color="#6D6D6D" size="24"></u-icon>
			</navigator>
		</view>
		<view class="mine-top flex-align">
			<u-avatar :src="src ? src : text" shape="square" size="52"></u-avatar>
			<view class="name">
				<u--text
					customStyle="fontFamily: YouSheBiaoTiHei, YouSheBiaoTiHei;color: #3D3D3D;fontWeight: bold;fontStyle: italic; "
					text="xxx" size="24" openType="share" @click="clickHandler"></u--text>
				<view class="location flex-align">
					<view class="flex-align">
						<u--text customStyle="color: #3D3D3D;" text="中景创远 · HR" openType="share"
							@click="clickHandler"></u--text>
						<u--image :showLoading="true" src="../../../static/right-arrow.png" width="23px" height="23px"
							@click="click" :lazy-load="true"></u--image>
					</view>
					<view class="flex-align">
						<u--text customStyle="color: #3D3D3D;" text="职聊号：" openType="share"
							@click="clickHandler"></u--text>
						<u--text customStyle="color: #3D3D3D;" text="1231231234" openType="share"
							@click="clickHandler"></u--text>
					</view>
				</view>
			</view>
		</view>
		<u-grid customStyle="padding: 24px 10px;background-color: white;margin-bottom: 8px" :border="false"
			@click="click">
			<u-grid-item customStyle="width: 25%;" v-for="(baseListItem,baseListIndex) in baseList"
				:key="baseListIndex">
				<view class="approve">{{baseListItem.num}}</view>
				<text class="grid-text">{{baseListItem.title}}</text>
			</u-grid-item>
		</u-grid>
		<view class="position">
			<view class="flex-between">
				<view class="jobf manager-job">
					<text class="grid-text">1</text>
					<text class="grid-text">个在线职位</text>
				</view>
				<view class="jobt flex-align">
					<text class="grid-text">管理职位</text>
					<u--image :showLoading="true" src="../../../static/right-arrow.png" width="23px" height="23px"
						@click="click" :lazy-load="true"></u--image>
				</view>
			</view>
			<u-line :customStyle="{margin: '46rpx 0rpx 30rpx 0rpx'}"></u-line>
			<view class="tposition flex">
				<u-button class="position-btn" text="优先推送"></u-button>
				<u-button class="position-btn" text="群发消息"></u-button>
				<u-button class="position-btn" text="置顶职位"></u-button>
			</view>
		</view>
		<view class="common-functions">
			<u--text :customStyle="{'margin-bottom': '46rpx'}" text="常用功能"></u--text>
			<u-grid :border="false" @click="click">
				<u-grid-item customStyle="width: 25%;" v-for="(commonFuncItem,commonFuncIndex) in commonFunc"
					:key="commonFuncIndex">
					<u--image :customStyle="{'margin-bottom': '14rpx'}" :showLoading="true" :src="commonFuncItem.src"
						width="80rpx" height="80rpx" @click="click" :lazy-load="true"></u--image>
					<text class="grid-text">{{commonFuncItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="common-functions other-functions">
			<u--text text="其他功能"></u--text>
			<view class="view-all flex">
				<text class="grid-text">查看全部</text>
				<u--image :showLoading="true" src="../../../static/right-arrow.png" width="23px" height="23px"
					@click="click" :lazy-load="true"></u--image>
			</view>
			<u-grid :border="false" customStyle="row-gap: 50rpx;">
				<u-grid-item @click="otherFunction(otherFuncItem)" customStyle="width: 25%; row-gap: 4rpx;"
					v-for="(otherFuncItem,otherFuncIndex) in otherFunc" :key="otherFuncIndex">
					<u--image :customStyle="{'margin-bottom': '14rpx'}" :showLoading="true" :src="otherFuncItem.src"
						width="80rpx" height="80rpx" :lazy-load="true"></u--image>
					<text class="grid-text">{{otherFuncItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				text: '无头像',
				baseList: [{
						num: '9',
						title: '沟通过'
					},
					{
						num: '0',
						title: '面试'
					},
					{
						num: '0',
						title: '收藏夹'
					},
					{
						num: '1',
						title: '影响力'
					},
				],
				commonFunc: [{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '招聘数据'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '项目外包'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '招聘道具'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '公司主页'
					},
				],
				otherFunc: [{
						nav: '/pages/rule-center/index',
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '规则中心'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '我的权益'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '钱包'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '个人主页'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '社区'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '客服'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '勋章'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '反馈'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '隐私'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '仲裁'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '开发票'
					},
					{
						src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						title: '企业管理'
					},
				]
			}
		},
		methods: {
			otherFunction(otherFuncItem) {
				console.log(otherFuncItem)
				wx.navigateTo({
					url: otherFuncItem.nav,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: 'test'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.page {
		color: #3d3d3d;
	}

	.setting {
		background-color: #fff;
		margin-bottom: -5px;
		column-gap: 2px;
	}

	.name {
		flex: 1;
	}

	.mine-top {
		column-gap: 21px;
		background-color: white;
		padding: 0px 2px;
	}

	.location {
		width: 100%;
		column-gap: 21px;
	}

	.approve {
		font-size: 36rpx;
		color: #3B3C3F;
		text-align: center;
		font-style: normal;
		font-weight: bold;
		margin-bottom: 3px;
	}

	.grid-text {
		font-size: 20rpx;
		color: #B8B8B8;
	}

	.u-line {
		border: none;
	}

	.position,
	.common-functions {
		background-color: white;
		width: calc(100%-14px);
		/* height: 262rpx; */
		background: #FEFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 7px;
		padding: 48rpx 28rpx;
	}

	.jobf text:nth-child(1) {
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 400;
		font-size: 38rpx;
		color: #3D3D3D;
		line-height: 54rpx;
	}

	.jobf text:nth-child(2) {
		color: #3D3D3D;
	}

	.jobt text {
		line-height: 54rpx;
	}

	.tposition {
		column-gap: 26rpx;
	}

	.position-btn {
		width: 204rpx;
		height: 70rpx;
		background: #F5F5F5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: none;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 24rpx;
		color: #6D6D6D;
		line-height: 34rpx;
	}

	uni-button:after {
		content: none;
	}

	.common-functions {
		margin-top: 16rpx;
	}

	.view-all {
		height: 23px;
		line-height: 23px;
		justify-content: flex-end;
		margin: -41rpx 0rpx 46rpx 0rpx;
	}
</style>